<template>
  <div class="search">
    <Card>
      <Row class="operation" @keydown.enter.native="handleSearch">
        <Row>
          <Form ref="searchForm" :model="searchForm" inline :label-width="70">
            <FormItem label="装货地址">
              <div style="width: 200px">
                <Cascader
                  class="Unloadingcss"
                  v-model="searchForm.beginAreaCodeRouter"
                  :data="UnloadingAddresslist"
                  :load-data="LoadingProvinceloadData"
                  @on-change="getStartAreaRouter"
                  clearable
                ></Cascader>
              </div>
            </FormItem>
            <FormItem label="卸货地址">
              <div style="width: 200px">
                <Cascader
                  class="Unloadingcss"
                  v-model="searchForm.endAreaCodeRouter"
                  :data="UnloadingAddresslist"
                  :load-data="ProvinceloadData"
                  @on-change="getEndAreaRouter"
                  clearable
                ></Cascader>
              </div>
            </FormItem>

            <FormItem style="margin-left: -35px" class="br">
              <Button @click="handleSearch" type="primary" icon="ios-search"
                >搜索</Button
              >
              <Button @click="handleReset">重置</Button>
              <Button @click="getDataList" icon="md-refresh">刷新</Button>
              <Button @click="addaRouter" icon="md-add" type="primary"
                >新增路线</Button
              >
            </FormItem>
          </Form>
        </Row>
      </Row>

      <Row>
        <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          ref="table"
          sortable="custom"
        ></Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- 新增路线 -->
    <div>
      <Drawer :title="choutiText" width="550" v-model="newRouteDrawer">
        <div style="max-height: 85vh; overflow: auto">
          <Form
            ref="formItem"
            :model="formItem"
            :label-width="150"
            inline
            size="small"
            :rules="useVehicleTypeList"
          >
            <!-- 地址 -->
            <div style="margin-left: -60px">
              <div>
                <Col>
                  <FormItem label="装货地址" prop="beginAreaCodeShow">
                    <div style="width: 200px">
                      <Cascader
                        class="Unloadingcss"
                        v-model="formItem.beginAreaCodeShow"
                        :data="UnloadingAddresslist"
                        :load-data="LoadingProvinceloadData"
                        @on-change="getStartArea"
                        clearable
                      ></Cascader>
                    </div>
                  </FormItem>
                  <FormItem
                    label="详细地址"
                    v-if="detailedAddresShow"
                    prop="beginAddress"
                  >
                    <Input
                      @click.native="beginAddressClick"
                      style="width: 330px"
                      v-model="formItem.beginAddress"
                      placeholder="选择详细地址"
                    />
                    <!-- <Button @click="angeAdd" type="primary">装货详细地址</Button> -->
                  </FormItem>
                  <FormItem label="装运范围" prop="pretendEnclosure">
                    <div>
                      <InputNumber
                        :min="0"
                        v-model="formItem.pretendEnclosure"
                        style="width: 160px"
                        placeholder="输入电子围栏半径"
                      >
                      </InputNumber>
                      <span> km</span>
                    </div>
                  </FormItem>
                  <FormItem label="发货单位" prop="extractName">
                    <Input
                      style="width: 210px"
                      v-model="formItem.extractName"
                      placeholder="公司名称"
                    />
                  </FormItem>
                  <FormItem
                    style="margin-left: -15px"
                    label="联系人"
                    prop="extracContactName"
                  >
                    <Input
                      style="width: 210px"
                      v-model="formItem.extracContactName"
                      placeholder="输入发货联系人"
                    />
                  </FormItem>
                  <FormItem label="联系电话" prop="extractPhone">
                    <Input
                      style="width: 210px"
                      v-model="formItem.extractPhone"
                      placeholder="输入发货方联系电话"
                    />
                  </FormItem>
                </Col>
                <div class="Line"></div>
                <FormItem label="卸货地址" prop="endAreaCodeShow">
                  <div style="width: 200px">
                    <Cascader
                      class="Unloadingcss"
                      v-model="formItem.endAreaCodeShow"
                      clearable
                      :data="UnloadingAddresslist"
                      :load-data="ProvinceloadData"
                      @on-change="getEndArea"
                    ></Cascader>
                  </div>
                </FormItem>
                <FormItem
                  label="详细地址"
                  v-if="detailedAddresShow"
                  prop="endAddress"
                >
                  <Input
                    @click.native="angeSign"
                    style="width: 330px"
                    v-model="formItem.endAddress"
                    placeholder="选择详细地址"
                  />
                </FormItem>
                <FormItem label="签收范围" prop="dischargeEnclosure">
                  <div>
                    <InputNumber
                      :min="0"
                      style="width: 160px"
                      v-model="formItem.dischargeEnclosure"
                      placeholder="输入电子围栏半径"
                    >
                    </InputNumber>
                    <span> km</span>
                  </div>
                </FormItem>
                <FormItem label="收货单位" prop="takeName">
                  <Input
                    style="width: 210px"
                    v-model="formItem.takeName"
                    placeholder="公司名称"
                  />
                </FormItem>
                <FormItem
                  style="margin-left: -15px"
                  label="联系人"
                  prop="takeContactName"
                >
                  <Input
                    style="width: 210px"
                    v-model="formItem.takeContactName"
                    placeholder="输入收货联系人"
                  />
                </FormItem>
                <FormItem label="联系电话" prop="takePhone">
                  <Input
                    style="width: 210px"
                    v-model="formItem.takePhone"
                    placeholder="输入收货方联系电话"
                  />
                </FormItem>
                <div>
                </div>
              </div>
            </div>
          </Form>
        </div>
        <div class="demo-drawer-footer">
          <Button
            :loading="loadingAdd"
            @click="addRouteDetermine"
            type="primary"
            >{{ routerName }}</Button
          >
        </div>
      </Drawer>
    </div>

    <!-- 地图 -->
    <Modal width="60%" v-model="mapModal" :title="mapModaltitle">
      <div class="modal-box">
        <div style="margin: 0 0 20px 0">
          <div v-if="mapModaltitle == '装货详细地址'">
            <!-- this.SelectBegAreaAddress[2].__label -->
            <span class="labelfonsize">{{ this.ProvinceCityCounty }}</span>
          </div>
          <div v-else>
            <span class="labelfonsize">{{ this.ProvinceCityCounty }}</span>
          </div>
        </div>
        <div style="height: 300px" id="newAddresscontaine" class="map">
          <div id="pickerBoxadd">
            <input
              id="pickerInputthree"
              placeholder="输入关键字选取地点"
              autocomplete="off"
            />
            <div id="poiInfo"></div>
          </div>
        </div>

        <div id="right">
          <div style="display: none">
            <div>
              <div class="title">选择模式</div>
              <Input type="radio" name="mode" value="dragMap" checked
                >拖拽地图模式</Input
              >
              <div></div>
              <Input type="radio" name="mode" value="dragMarker"
                >拖拽Marker模式</Input
              >
            </div>
            <div>
              <button id="start">开始选点</button>
              <button id="stop">关闭选点</button>
            </div>
          </div>
          <div style="margin: 20px 0 0 0">
            <div class="title">选址结果</div>
            <div class="c">
              经纬度：
              <span id="lnglatAddress"></span>
            </div>
            <div class="c">
              地址：
              <span id="addressadd"></span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="changeDetailAddress" type="primary">确定</Button>
      </div>
    </Modal>
    <!--用户认证  -->
    <userAuthenticationModal v-if="showModal" :usernModal="this.usernModal">
    </userAuthenticationModal>
  </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
// import vueQr from "vue-qr";
import { getProvinceData, getAreaCityList } from "@/api/index";
import {
  getCommonLine,
  addCommonLine,
  deleteCommonLine,
} from "@/api/ownerEnd/supplyNeed";

import userAuthenticationModal from "@/views/componentsonn_source_goods/userAuthenticationModal";
import {
  userInfoVo, //承运人信息
} from "@/api/ownerEnd/waybillAdmin";
export default {
  name: "vehicleVo",
  data() {
    return {
      showModal: false,
      userCompanyInfoData: {}, //承运人信息
      usernModal: false,
      // 新增
      newRouteDrawer: false, //弹框
      choutiText: "新增路线",
      mapModal: false, //地图弹框
      routerName: "新增路线",
      detailedAddresShow: true,
      mapDetailEdddress: "",
      ProvinceCityCounty: " ", //地图弹框显示省市县的.
      addresPoiPicker: "",
      selectBegAreaAddress: [], //装货地址选择后的数组
      selectEndAreaAddress: [], //卸货地址选择后的数组
      loadingAdd: false,
      formItem: {
        id: "",
        beginAreaCode: "", //起始县区列表code
        beginAreaCodeShow: "", //起始县区列表 回显code
        beginAddress: "", //装货详细地址
        pretendEnclosure: "", //装货电子围栏
        beginLng: "", //装货经度
        beginLat: "", //装货纬度
        extractName: "", //发货人单位
        extracContactName: "", //提货联系人
        extractPhone: "", //发货人电话
        // loadingIdCard: "", //发货方 --- 身份证/营业执照号

        dischargeEnclosure: "", //卸货电子围栏
        endAreaCode: "", //结束县区列表 code
        endAreaCodeShow: "", //结束县区列表 回显code
        endAddress: "", //卸货详细地址
        endLng: "", //	卸货经度
        endLat: "", //	卸货纬度
        takeName: "", //收货人单位
        takeContactName: "", //收货联系人
        takePhone: "", //收货人手机号
        // idCardOrBusLicenseNo: "", //收货方 --- 身份证/营业执照号
      },
      useVehicleTypeList: {
        beginAreaCodeShow: [
          {
            type: "array",
            required: true,
            message: "选择装货地址",
            trigger: "blur",
          },
        ],
        beginAddress: [
          {
            required: true,
            message: "选择装货详细地址",
            trigger: "blur",
          },
        ],
        endAddress: [
          {
            required: true,
            message: "选择卸货详细地址",
            trigger: "blur",
          },
        ],
        endAreaCodeShow: [
          {
            type: "array",
            required: true,
            message: "选择卸货地址",
            trigger: "blur",
          },
        ],
        pretendEnclosure: [
          {
            required: true,
            type: "number",
            message: "输入装运范围",
            trigger: "blur",
          },
        ],
        dischargeEnclosure: [
          {
            type: "number",
            required: true,
            message: "输入签收范围",
            trigger: "blur",
          },
        ],

        takePhone: [
          {
            required: true,
            message: "输入收货方电话",
            trigger: "blur",
          },
        ],
        extractName: [
          {
            required: true,
            message: "输入发货单位",
            trigger: "blur",
          },
        ],

        extracContactName: [
          {
            required: true,
            message: "输入发货联系人",
            trigger: "blur",
          },
        ],
        extractPhone: [
          {
            required: true,
            message: "输入发货联系人电话",
            trigger: "blur",
          },
        ],
        takeName: [
          {
            required: true,
            message: "输入收货方单位",
            trigger: "blur",
          },
        ],
        takeContactName: [
          {
            required: true,
            message: "输入收货联系人",
            trigger: "blur",
          },
        ],
      },

      newRouteDrawer: false,
      UnloadingAddresslist: [], //获取地址
      openTip: true, // 显示提示
      showType: "0", // 添加或编辑标识
      showDrawer: false, // 显示添加编辑抽屉
      loading: true, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "", // 默认排序字段
        order: "", // 默认排序方式
        beginAreaCodeRouter: "",
        endAreaCodeRouter: "",
        beginAreaCode: "", // 装货地址
        endAreaCode: "", // 卸货地址
      },
      selectList: [], // 多选数据
      columns: [
        // 表头
        {
          title: "#",
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "装货地址",
          minWidth: 300,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.beginProvinceName +
              params.row.beginCityName +
              params.row.beginAreaName +
              params.row.beginAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, maxWidth: "270", transfer: true },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      marginTop: "10px",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                      paddingRight: "5px",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },
        {
          title: "装运范围",
          width: 100,
          sortable: false,
          render: (h, params) => {
            return h("span", params.row.pretendEnclosure + " km");
          },
        },
        {
          title: "发货单位",
          width: 220,
          key: "extractName",
          sortable: false,
          tooltip: true,
        },
        {
          title: "联系人",
          width: 140,
          key: "extracContactName",
          sortable: false,
        },
        {
          title: "联系电话",
          width: 140,
          key: "extractPhone",
          sortable: false,
        },
        {
          title: "卸货地址",
          minWidth: 300,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.endProvinceName +
              params.row.endCityName +
              params.row.endAreaName +
              params.row.endAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, maxWidth: "270", transfer: true },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      marginTop: "10px",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                      paddingRight: "5px",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },
        {
          title: "签收范围",
          width: 100,
          sortable: false,
          render: (h, params) => {
            return h("span", params.row.dischargeEnclosure + " km");
          },
        },
        {
          title: "收货单位",
          width: 220,
          key: "takeName",
          sortable: false,
          tooltip: true,
        },
        {
          title: "联系人",
          width: 140,
          key: "takeContactName",
          sortable: false,
        },
        {
          title: "联系电话",
          width: 140,
          key: "takePhone",
          sortable: false,
        },
        {
          title: "更新时间",
          key: "createTime",
          minWidth: 180,
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 180,
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 130,
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.editRoute(params.row);
                    },
                  },
                },
                "编辑"
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.deteleRoute(params.row);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      data: [], // 表单数据
      pageNumber: 1, // 当前页数
      pageSize: 10, // 页面大小
      total: 0, // 表单数据总数
      
        longitude: "",
      latitude: "",
      loadingLongitude: "",
      loadingLatitude: "",
    };
  },
  components: {
    userAuthenticationModal,
  },
  methods: {
    init() {
      this.getDataList();
      this.getProvinceDataList();
      this.getMap();
    },
    // 地图
    getMap() {
      let that = this;
      that.addressMap = new AMap.Map("newAddresscontaine", {
        center: [116.378517, 39.865246], // 默认初始化经纬度 如果为空则默认北京
        zoom: 10,
      });
      AMapUI.loadUI(
        ["misc/PoiPicker", "misc/PositionPicker"],
        function (PoiPicker, PositionPicker) {
          that.addresPoiPicker = new PoiPicker({
            // city: "", // 初始化 检索城市
            input: "pickerInputthree",
          });
          var positionPicker = new PositionPicker({
            mode: "dragMap",
            map: that.addressMap,
          });

          positionPicker.on("success", function (positionResult) {
            //全局变量 存储选择的地址信息 info.adress poi.location
            let mapaddress = [];
            if (that.ProvinceCityCounty != "") {
              mapaddress = positionResult.address.split(that.SelectCityArea);
              //地图选择的详细地址
            }
            if (mapaddress.length < 2) {
              that.SelectMapDetailAddress = "";
            } else {
              for (let index = 0; index < mapaddress.length; index++) {
                if (index > 0) {
                  if (index == 1) {
                    that.SelectMapDetailAddress = mapaddress[index];
                  } else {
                    that.SelectMapDetailAddress +=
                      that.SelectCityArea + mapaddress[index];
                  }
                }
              }
            }

            that.SelectMapDetailLat = positionResult.position.lat; //地图选择的经度
            that.SelectMapDetailLng = positionResult.position.lng; //地图选择的纬度
            document.getElementById("lnglatAddress").innerHTML =
              positionResult.position;
            document.getElementById("addressadd").innerHTML =
              positionResult.address;
          });
          positionPicker.on("fail", function (positionResult) {});
          var onModeChange = function (e) {
            positionPicker.setMode(e.target.value);
          };
          var startButton = document.getElementById("start");
          var stopButton = document.getElementById("stop");
          var dragMapMode = document.getElementsByName("mode")[0];
          var dragMarkerMode = document.getElementsByName("mode")[1];
          startButton.addEventListener("click", function () {
            positionPicker.start(map.getBounds().getSouthWest());
          });
          stopButton.addEventListener("click", function () {
            positionPicker.stop();
          });
          dragMapMode.addEventListener("change", onModeChange);
          dragMarkerMode.addEventListener("change", onModeChange);
          positionPicker.start();
          that.addressMap.panBy(0, 1);
          that.addressMap.addControl(
            new AMap.ToolBar({
              liteStyle: true,
            })
          );
          //初始化poiPicker
          poiPickerReady(that.addresPoiPicker);
        }
      );
      function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker;
        var marker = new AMap.Marker();
        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -20),
        });
        //选取了某个POI
        poiPicker.on("poiPicked", function (poiResult) {
          var source = poiResult.source,
            poi = poiResult.item,
            info = {
              source: source,
              id: poi.id,
              name: poi.name,
              location: poi.location.toString(),
              address: poi.address,
            };
          marker.setMap(that.addressMap);
          infoWindow.setMap(that.addressMap);
          marker.setPosition(poi.location);
          infoWindow.setPosition(poi.location);
          document.getElementById("lnglatAddress").innerHTML = info.location;
          document.getElementById("addressadd").innerHTML = info.name;
          document.getElementById("pickerInputthree").value = info.name;
          that.SelectMapDetailAddress = info.name; //地图选择的详细地址
          that.SelectMapDetailLat = info.location.split(",")[0]; //地图选择的经度
          that.SelectMapDetailLng = info.location.split(",")[1]; //地图选择的纬度
          that.addressMap.setCenter(marker.getPosition());
        });
        poiPicker.onCityReady(function () {
          // poiPicker.suggest('美食');
        });
      }
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.companyName = ""; // 货主姓名
      this.searchForm.companyPhone = ""; //  手机号
      this.searchForm.beginAreaCode = ""; // 装货地址
      this.searchForm.endAreaCode = ""; // 卸货地址
      this.searchForm.beginAreaCodeRouter = "";
      this.searchForm.endAreaCodeRouter = "";
      // 重新加载数据
      this.getDataList();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    // 选择装货地址
    getStartAreaRouter(value, selectedData) {
      if (selectedData.length == 3) {
        this.searchForm.beginAreaCode = value[2]; //搜索赋值
      }
    },
    // 选择卸货地址
    getEndAreaRouter(value, selectedData) {
      if (selectedData.length == 3) {
        this.searchForm.endAreaCode = value[2]; //搜索赋值
      }
    },
    // 新增常用路线
    addaRouter() {
      this.$refs.formItem.resetFields();
      if (this.userCompanyInfoData.companyStatus == 0) {
        this.usernModal = true;
        this.showModal = false;
        this.$nextTick(() => {
          this.showModal = true;
        });
      } else if (this.userCompanyInfoData.companyStatus == 2) {
        return this.$Message.warning("您提交的资料正在审核中，请耐心等候");
      } else if (this.userCompanyInfoData.companyStatus == 1) {
        this.formItem.id = "";
        this.choutiText = "新增路线";
        this.routerName = "新增路线";
        this.newRouteDrawer = true;
        this.formItem.beginAreaCode = ""; //起始县区列表code
        this.formItem.beginAreaCodeShow = ""; //起始县区列表 回显code
        this.formItem.beginAddress = ""; //装货详细地址
        this.formItem.pretendEnclosure = ""; //装货电子围栏
        this.formItem.beginLng = ""; //装货经度
        this.formItem.beginLat = ""; //装货纬度
        this.formItem.dischargeEnclosure = ""; //卸货电子围栏
        this.formItem.endAreaCode = ""; //结束县区列表 code
        this.formItem.endAreaCodeShow = ""; //结束县区列表 回显code
        this.formItem.endAddress = ""; //卸货详细地址
        // this.formItem = {};
        this.formItem.endLng = ""; //	卸货经度
        this.formItem.endLat = ""; //	卸货纬度
        this.formItem.takeName = ""; //收货人单位
        this.formItem.takePhone = ""; //收货人手机号
        // this.formItem.idCardOrBusLicenseNo = ""; //收货方 --- 身份证/营业执照号
        this.formItem.extractName = ""; //发货人单位
        this.formItem.extractPhone = ""; //发货人电话
        // this.formItem.loadingIdCard = ""; //发货方 --- 身份证/营业执照号
      }
      this.getUserCompanyInfoData();
    },
    //承运人信息
    getUserCompanyInfoData() {
      userInfoVo().then((res) => {
        this.userCompanyInfoData = res.result.companyInfoVo;
        this.formItem.extractName = res.result.companyInfoVo.companyName;
        this.formItem.extracContactName = res.result.companyInfoVo.personalName;
        this.formItem.extractPhone = res.result.companyInfoVo.mobile;

        // this.formItem.idCardOrBusLicenseNo = res.result.companyInfoVo.certNo;
      });
    },
    //装货详细地址
    beginAddressClick() {
      if (this.formItem.beginAreaCodeShow != "") {
        this.ProvinceCityCounty = this.selectBegAreaAddress[2].__label;
        this.mapDetailEdddress = "1";
        this.mapModal = true;
        this.mapModaltitle = "装货详细地址";
      } else {
        this.$Message.warning("请先选择装货地");
      }

      if (this.formItem.beginLng == "") {
        if (this.loadingLongitude && this.loadingLatitude) {
          this.addressMap.setCenter([
            Number(this.loadingLongitude),
            Number(this.loadingLatitude),
          ]);
        } else {
          this.addressMap.setCenter([116.378517, 39.865246]);
        }
      } else {
        this.addressMap.setCenter([
          Number(this.formItem.beginLng),
          Number(this.formItem.beginLat),
        ]);
      }
      this.addresPoiPicker.opts.input.value = "";
      this.addresPoiPicker.setCity(this.selectBegAreaAddress[1].label);
      this.SelectCityArea = this.selectBegAreaAddress[2].label;
    },
    // 卸货详细地址
    angeSign() {
      if (this.formItem.endAreaCodeShow != "") {
        this.ProvinceCityCounty = this.selectEndAreaAddress[2].__label;
        this.mapDetailEdddress = "2";
        this.mapModal = true;
        this.mapModaltitle = "卸货详细地址";
      } else {
        this.$Message.warning("请先选择卸货地");
      }

      if (this.formItem.endLng == "") {
        if (this.longitude && this.latitude) {
          this.addressMap.setCenter([
            Number(this.longitude),
            Number(this.latitude),
          ]);
        } else {
          this.addressMap.setCenter([116.378517, 39.865246]);
        }
      } else {
        this.addressMap.setCenter([
          Number(this.formItem.endLng),
          Number(this.formItem.endLat),
        ]);
      }
      this.addresPoiPicker.opts.input.value = "";
      this.addresPoiPicker.setCity(this.selectEndAreaAddress[1].label);
      this.SelectCityArea = this.selectEndAreaAddress[2].label;
    },
    // 装货地址选中后的值
    getStartArea(value, selectedData) {
      if (selectedData) {
        this.loadingLongitude = selectedData[2].lng;
        this.loadingLatitude = selectedData[2].lat;
      }
      if (value.length > 0) {
        this.formItem.beginAreaCodeShow = [
          selectedData[0].value,
          selectedData[1].value,
          selectedData[2].value,
        ];
        this.formItem.beginAreaCode = value[2];
      }
      if (selectedData.length > 0) {
        this.selectBegAreaAddress = selectedData;
      }
      this.formItem.beginAddress = "";
      this.formItem.beginLat = "";
      this.formItem.beginLng = "";
    },
    // 卸货地址选中后的值
    getEndArea(value, selectedData) {
      if (selectedData) {
        this.longitude = selectedData[2].lng;
        this.latitude = selectedData[2].lat;
      }
      if (value.length > 0) {
        this.formItem.endAreaCode = value[2];
        this.formItem.endAreaCodeShow = [
          selectedData[0].value,
          selectedData[1].value,
          selectedData[2].value,
        ];
      }
      if (selectedData.length > 0) {
        this.selectEndAreaAddress = selectedData;
      }
      this.formItem.endAddress = "";
      this.formItem.endLat = "";
      this.formItem.endLng = "";
    },
    // 选择详细地址的弹框确定
    changeDetailAddress() {
      this.detailedAddresShow = false;
      this.$nextTick(() => {
        this.detailedAddresShow = true;
      });
      if (this.SelectMapDetailAddress == "") {
        return this.$Message.warning("请先选择正确的地址");
      }

      // this.addressMap.destroy();
      if (this.mapDetailEdddress == "1") {
        this.formItem.beginAddress = this.SelectMapDetailAddress;
        this.formItem.beginLat = this.SelectMapDetailLat;
        this.formItem.beginLng = this.SelectMapDetailLng;
      } else if (this.mapDetailEdddress == "2") {
        this.formItem.endAddress = this.SelectMapDetailAddress;
        this.formItem.endLat = this.SelectMapDetailLat;
        this.formItem.endLng = this.SelectMapDetailLng;
      }
      this.mapModal = false;
    },
    // 添加路线
    addRouteDetermine() {
      this.$refs.formItem.validate((valid) => {
        if (valid) {
          this.loadingAdd = true;
          addCommonLine(this.formItem).then((res) => {
            this.loadingAdd = false;
            if (res.code == 200) {
              if (this.choutiText == "新增路线") {
                this.$Message.success("添加路线成功");
              } else {
                this.$Message.success("修改路线成功");
              }

              this.newRouteDrawer = false;
              this.getDataList();
            } else {
              this.$Message.error("请将源信息填写完整");
            }
          });
        }
      });
    },
    // 修改常用路线
    editRoute(v) {
      this.$refs.formItem.resetFields();
      for (let attr in v) {
        if (v[attr] == null) {
          v[attr] = "";
        }
      }
      let str = JSON.stringify(v);
      let data = JSON.parse(str);
      this.formItem = data;

      this.choutiText = "修改路线";
      this.routerName = "修改路线";

      this.formItem.id = v.commonId;
      var begaddress = [];
      var enaddress = [];
      begaddress.push(this.formItem.beginProvinceCode);
      begaddress.push(this.formItem.beginCityCode);
      begaddress.push(this.formItem.beginAreaCode);
      this.formItem.beginAreaCodeShow = begaddress;
      this.formItem.goodSubType = this.formItem.goodSubType;
      enaddress.push(this.formItem.endProvinceCode);
      enaddress.push(this.formItem.endCityCode);
      enaddress.push(this.formItem.endAreaCode);
      this.formItem.endAreaCodeShow = enaddress;
      this.formItem.id = this.formItem.commonId;
      this.selectBegAreaAddress = [];
      this.selectEndAreaAddress = [];

      this.selectBegAreaAddress.push({
        label: this.formItem.beginProvinceName,
        value: this.formItem.beginProvinceCode,
      });
      this.selectBegAreaAddress.push({
        label: this.formItem.beginCityName,
        value: this.formItem.beginCityCode,
      });
      this.selectBegAreaAddress.push({
        label: this.formItem.beginAreaName,
        value: this.formItem.beginAreaCode,
        __label:
          this.formItem.beginProvinceName +
          "/" +
          this.formItem.beginCityName +
          "/" +
          this.formItem.beginAreaName,
        __value: [
          this.formItem.beginProvinceCode,
          this.formItem.beginCityCode,
          this.formItem.beginAreaCode,
        ],
      });

      this.selectEndAreaAddress.push({
        label: this.formItem.endProvinceName,
        value: this.formItem.endProvinceCode,
      });
      this.selectEndAreaAddress.push({
        label: this.formItem.endCityName,
        value: this.formItem.endCityCode,
      });
      this.selectEndAreaAddress.push({
        label: this.formItem.endAreaName,
        value: this.formItem.endAreaCode,
        __label:
          this.formItem.endProvinceName +
          "/" +
          this.formItem.endCityName +
          "/" +
          this.formItem.endCityName,
        __value: [
          this.formItem.endProvinceCode,
          this.formItem.endCityCode,
          this.formItem.endAreaCode,
        ],
      });
      this.newRouteDrawer = true;
      this.getUserCompanyInfoData();
    },

    // 删除
    deteleRoute(row) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "确认将该地址删除吗？",
        loading: true,
        onOk: () => {
          this.$Modal.remove();
          deleteCommonLine({ id: row.commonId }).then((res) => {
            if (res.code == 200) {
              this.$Message.success("操作成功");
              this.getDataList();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });
    },
    // 获取卸货省份数据
    getProvinceDataList() {
      if (this.UnloadingAddresslist.length > 0) {
        return;
      }
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            this.UnloadingAddresslist = res.result;
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    // 搜索卸货详细地址
    ProvinceloadData(item, callback) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          callback();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //搜索装货详细地址
    LoadingProvinceloadData(item, callback) {
      this.$nextTick(() => {
        item.loading = true;
        getAreaCityList({ code: item.value, type: item.level }).then((res) => {
          item.loading = false;
          if (res.code == 200) {
            res.result.forEach(function (e) {
              if (e.level != 3) {
                e.level = e.level;
                e.label = e.label;
                e.pid = e.pid;
                e.value = e.value;
                e.loading = false;
                e.children = [];
              } else {
                e.value = e.value;
                e.label = e.label;
              }
            });
            item.children = res.result;
            callback();
          } else {
            this.$Message.error(res.message);
          }
        });
      });
    },
    // 获取数据
    getDataList() {
      if (this.searchForm.beginAreaCodeRouter.length == 0) {
        this.searchForm.beginAreaCode = "";
      }
      if (this.searchForm.endAreaCodeRouter.length == 0) {
        this.searchForm.endAreaCode = "";
      }
      this.loading = true;
      getCommonLine(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },

    // 货主详细信息开启
    // showCompanyInfoVo(row) {
    //   this.OwnerDetailsId = row.companyUserId;
    //   this.OwnerDetailsModalue = true;
    // },
    // 货主详细信息关闭
    // OwnerDetaiEnd(val) {
    //   this.OwnerDetailsModalue = val;
    //   this.OwnerDetailsId = "";
    // },
  },
  mounted() {
    this.init();
    this.getUserCompanyInfoData();
  },
};
</script>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/table-common.less";
.search {
  .operation {
    margin-bottom: 2vh;
  }
  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }
  .select-clear {
    margin-left: 10px;
  }
  .page {
    margin-top: 2vh;
  }
  .drop-down {
    margin-left: 5px;
  }
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
#pickerInputthree {
  width: 210px;
  padding: 5px 5px;
}
#pickerBoxadd {
  position: absolute;
  z-index: 99999;
  top: 0px;
  right: 50px !important;
  height: 290px !important;
  /* width: 300px; */
  overflow: auto;
}
.Line {
  width: 99%;
  height: 1px;
  background-color: #eee;
  margin-top: 4px;
  margin-bottom: 30px;
  // margin-left: 21px;
}
.check {
  &::before {
    content: "*";
    display: inline-block;
    margin-right: 2px;
    line-height: 1;
    font-family: SimSun;
    font-size: 14px;
    color: #ed4014;
  }
}
.xchecksRotrt {
  position: relative;
  top: 5px;
  left: 22px;
}
.Unloadingcss {
  .ivu-cascader-menu {
    min-width: 155px !important;
  }
}
</style>